<template>
  <div class="homegoods-bg" v-if="goodslist.length">
    <!-- 轮播 -->
    <swiper class="homegoods-banner">
      <van-swipe-item v-for="item in goodslist[0].moduleContent.banners" :key="item.id">
        <img :src="item.bannerImgSrc" alt />
      </van-swipe-item>
    </swiper>
    <!-- 居家————创新设计 -->
    <cdesign class="cdesign"></cdesign>
    <!-- 居家—————收起杂物//下面的块都是ProductList组件/渲染了两条 -->
    <productlist v-for="(item,index) in arrcomputed" :key="index" :item="item"></productlist>
    <div class="dropload-noData">已经到底了</div>
  </div>
</template>

<script>
import swiper from '@/components/swiper'
import cdesign from './HomeGoods/CreateDesign'
import productlist from './HomeGoods/ProductList'
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {}
  },
  mounted () {
    this.$store.dispatch('homegoods/homeGoods')
  },
  methods: {
    // ...mapMutations('homegoods', ['pushdata']),
    ...mapActions('homegoods', ['homeGoods'])
  },
  computed: {
    ...mapState('homegoods', ['goodslist']),
    arrcomputed () {
      return this.goodslist.slice(2, 4)
    }
  },
  components: {
    swiper,
    cdesign,
    productlist
  }
}
</script>

<style lang="scss">
.homegoods-bg {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 50px;
  .dropload-noData {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
  }
  .cdesign {
    background: #fff;
    margin-top: 15px;
  }
}
.homegoods-banner {
  width: 100%;
  height: 250px;
  margin-bottom: 15px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
